var 弹框组件 = (msg) => {
    const div = document.createElement('div')
    document.body.appendChild(div)
    const app = createApp(
        MessageBox,  // 相当于vue的单文件组件
        {
            msg,
            fun: ()=>{
                app.unmount()
                div.remove()
            }
        }  // 这个对象, 相当于给上面的单文件组件传入的props
    )
    app.mount(div)
    //知识点: createApp是实例化一个vue组件, mount是把该组件挂载到div上
}

const MessageBox = {
    props: {
        msg: {type: String, default: ""},
        fun: {type:Function}
    },
    template:/*html*/`
    <div style="height:100px;width:100px;border:1px solid black">
        <div>{{msg}}</div>
        <button @click="fun">关闭</button>
    </div>
    `,       
}